<template>
  <cloud-dialog
    dialog-class="tips-video-dialog"
    :width="800"
    :visible="visible"
    :hide-cancel="true"
    @update:visible="emit('update:visible', $event)">
    <div class="wrapper">
      <div class="wrapper-inner">
        <div class="w-full h-full overflow-hidden! !rounded-3">
          <video
            class="w-full h-full"
            src="@/assets/node_cascade_tips_video.mp4"
            autoplay
            loop
            muted />
        </div>
      </div>
    </div>
    <template #footer>
      <section class="flex items-center justify-between">
        <div class="flex flex-col items-start">
          <div class="text-sm/22px font-bold text-1">节点级联管理说明</div>
          <div class="text-sm/22px text-5">
            可以快速拖动节点进行排序、修改层级
          </div>
        </div>
        <a-button type="primary" @click="handleConfirm">我知道了</a-button>
      </section>
    </template>
  </cloud-dialog>
</template>

<script setup lang="ts">
import { useAppStore } from '@/stores/app'
interface IEmit {
  (event: 'update:visible', value: boolean): void
  (event: 'update:record', value: null): void
}

interface IProps {
  visible: boolean
  record?: null
}

const emit = defineEmits<IEmit>()
defineProps<IProps>()

const appStore = useAppStore()

function handleConfirm() {
  appStore.setNodeCascadeVideoTipsShowed(true)
  emit('update:visible', false)
}
</script>

<style lang="less">
.tips-video-dialog {
  @apply overflow-hidden! rounded-2;
  .arco-modal-header {
    @apply hidden!;
  }
  .arco-modal-body {
    @apply !p-0 rounded-2 rounded-b-0;
    .wrapper {
      @apply w-800px p-6  flex-center;
      background-image: url('@/assets/images/video-bg.png');
      &-inner {
        @apply w-752px p-6 flex-center rounded-2 overflow-hidden;
        background: rgba(255, 255, 255, 0.5);
      }
    }
  }
}
</style>
